<!--
 * @Author       : 邱狮杰
 * @Date         : 2021-08-31 16:26:11
 * @LastEditTime : 2021-09-10 10:22:41
 * @FilePath     : /newhope/src/components/interperDream/index.vue
 * @Description  : 
-->

<script lang='ts' setup>
import { Title, Message, Gamge } from '/@/components/index'
import RealizeADream from '/@/assets/images/title/realizeADream.png'
import xiangDang from '/@/assets/images/title/xiangDang.png'
import { useClound } from './hooks/useClound'
import { useGo } from '/@/hooks/go'
import { PageProps } from '/@/page/gameSuccess/define'
import { withDefaults, onMounted, onUnmounted } from 'vue'
import { mikeChange, mikeClear, clearMikeNum } from '/@/utils/mikeChange'
const [go] = useGo()
let timer = 0
onMounted(() => {
	if (props.status === 2)
		// @ts-ignore
		timer = setTimeout(() => {
			go({ name: 'gameSuccess', query: { num: clearMikeNum(mikeList.value).toString() } as PageProps })
		}, 20000)
})
onUnmounted(() => {
	if (props.status === 2)
		clearTimeout(
			timer
		)
})
const props = withDefaults(defineProps<{ status: number }>(), {
	status: 2
})
const mikeList = useClound()
function onClickMike(res: { index: number, total: number }) {
	mikeList.value = mikeChange(mikeList.value, res.index)

	if (mikeClear(mikeList.value)) {
		go({ name: 'gameSuccess', query: { num: clearMikeNum(mikeList.value).toString() } as PageProps })
	}

}
</script>

<template>
	<div class="interperDream">
		<img src="../../assets/images/bkg/interpretDream.png" alt="bkg" class="bkg pulsate-bck" />
		<Title :src="RealizeADream" v-if="props.status === 2" />
		<Message v-else :title-img="xiangDang" />
		<Gamge @on-mike-click="onClickMike" :list="mikeList" v-if="props.status === 2" />
	</div>
</template>

<style lang='scss' scoped >
.pulsate-bck {
	-webkit-animation: pulsate-bck 1.5s ease-in-out infinite both;
	animation: pulsate-bck 1.5s ease-in-out infinite both;
}
@-webkit-keyframes pulsate-bck {
	0% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}
	50% {
		-webkit-transform: scale(0.99);
		transform: scale(0.99);
	}
	100% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}
}
@keyframes pulsate-bck {
	0% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}
	50% {
		-webkit-transform: scale(0.99);
		transform: scale(0.99);
	}
	100% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}
}
.interperDream {
	user-select: none;
	position: relative;
	height: 100%;
	width: 100%;
	// background: url("../../assets/images/bkg/interpretDream.png");
	// background-size: 100% 100%;
	// background-repeat: no-repeat;
	z-index: 10;
	.bkg {
		user-select: none;
		position: absolute;
		top: 0;
		height: 100%;
		width: 100%;
	}
}
</style>

